<template>
  <view class="scrollbox">
    <u-navbar title="结算情况"> </u-navbar>
    <getdatascrollview ref="getdatascrollview" :api="api" :seardata="tablequery">
      <template #default="{ list }">
        <view class="searchcontent">
          <selectzitem v-model="searchdata.appletId" style="flex: 1;" :options="appletIdOption" @change="change"
            :btnfalg="true">
          </selectzitem>
          <view class="sx" @click="sxfn">
            筛选<u-icon name="arrow-down"></u-icon>
          </view>
        </view>

        <listcard v-for="item in list" :item="item" :list="listinputs">
          <template #before>
            <view> {{ item.appletName }} </view>
            <view> {{ item.receivedDate }}</view>
          </template>
        </listcard>
      </template>
    </getdatascrollview>
    <sxpopup ref="sxpopup" :searchdata="searchdata"></sxpopup>
  </view>
</template>

<script>
import { getEnum } from "@/api/appletManage/advertising";
import item from "./components/item.vue";
import { settlementpage } from "@/api/appletManage/advertising";

export default {
  components: { item },
  data() {
    return {
      api: settlementpage,
      appletIdOption: [],
      customstyle: {
        margin: 0,
        flex: 0,
      },
      znum: 0,
      tablequery: {},

      searchdata: {},
      searchinputs: [],
      listinputs: [
        {
          label: "结算日期区间",
          value: "zone",
        },
        {
          label: "收入月份",
          value: "month",
        },
        {
          label: "结算状态",
          value: "settStatusType",
        },
        {
          label: "结算收入(元)",
          value: "receivedAmount",
        },
        {
          label: "申请补发结算单次数",
          value: "mailSendCnt",
        },
      ],
    };
  },
  mounted() {
    this.init();
  },
  onShow() {
    this.$refs.getdatascrollview && this.$refs.getdatascrollview.onRefresh();
  },
  methods: {
    async init() {
      let settStatusData = await getEnum("sett_status");
      settStatusData = settStatusData.data;
      let settStatusoption = [];
      Object.keys(settStatusData).forEach((e) => {
        settStatusoption.push({
          label: settStatusData[e],
          value: e,
        });
      });
      this.searchinputs = [
        {
          label: "结算状态",
          value: "settStatus",
          type: "select",
          option: settStatusoption,
        },
        {
          label: "时间选择",
          value: "month",
          type: "month",
        },
      ];
      console.log(appletoption, 1234);
    },
    change() {
      this.onsearch();
    },
    sxfn() {
      this.$refs.sxpopup.open(this.searchinputs).then((data) => {
        this.searchdata = {
          ...this.searchdata,
          ...data,

        };
        this.onsearch();
      });
    },
    async onsearch() {
      this.tablequery = {
        ...this.searchdata,

      };
      if (this.tablequery.month) {
        this.tablequery.month = this.$u.timeFormat(new Date(Number(this.tablequery.month)), "yyyymm");
      }
      this.$nextTick(() => {
        this.$refs.getdatascrollview.onRefresh();
      });
    },
  },
};
</script>
<style>
page {
  background: #fff;
}
</style>
<style lang="scss" scoped>
.edtbtn {
  color: #1890ff;
  font-size: 28rpx;
}

.znum {
  padding: 20rpx;
  font-size: 28rpx;

  .text {
    color: #32ae57;
    font-weight: bold;
  }
}

.searchcontent {
  display: flex;
  align-items: center;
  padding: 20rpx 20rpx 0 20rpx;

  .sx {
    padding-left: 20rpx;
    display: flex;
    font-size: 28rpx;
  }
}
</style>
